<template>
  <div class="edit-container">
    <el-descriptions title="基本信息：" :column="4" direction="vertical">
      <el-descriptions-item labelStyle="font-weight: bold" label="商家名称">{{ form.businessName }}
      </el-descriptions-item>
      <el-descriptions-item labelStyle="font-weight: bold" label="商家电话">{{ form.businessPhone }}
      </el-descriptions-item>
      <el-descriptions-item labelStyle="font-weight: bold" label="券额">{{ form.amount }}
      </el-descriptions-item>
      <el-descriptions-item labelStyle="font-weight: bold" label="出售时间">{{ form.saleTime }}
      </el-descriptions-item>
    </el-descriptions>
    <template>
      <div class="el-descriptions">
        <div style="height: 20px;"></div>
        <div class="el-descriptions__header">
          <div class="el-descriptions__title">付款方式：</div>
          <div class="el-descriptions__extra"></div>
        </div>
      </div>
    </template>
    <el-descriptions :column="1" direction="vertical" v-if="form.payType===1">
      <el-descriptions-item labelStyle="font-weight: bold" label="微信收款码">
        <el-image
            referrerpolicy="no-referrer"
            style="width: 100px!important; height: 100px!important;"
            :src="imageUrl + form.picUrl"
            fit="scale-down"
            :preview-src-list="[imageUrl + form.picUrl]"
        />
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="4" direction="vertical" v-if="form.payType===2">
      <el-descriptions-item labelStyle="font-weight: bold" label="持卡人姓名">{{ form.bankUserName }}
      </el-descriptions-item>
      <el-descriptions-item labelStyle="font-weight: bold" label="银行卡号">{{ form.bankNum }}
      </el-descriptions-item>
      <el-descriptions-item labelStyle="font-weight: bold" label="开户行">{{ form.bankName }}
      </el-descriptions-item>
      <el-descriptions-item labelStyle="font-weight: bold" label="开户行支行">{{ form.bankBranch }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script>
import {detail} from "@/api/hanging-sale";
import {getForm} from "@/utils/utils";

export default {
  components: {},
  props: {
    id: {
      default: null
    },
    imageUrl: {
      type: String,
      default: null
    },
  },
  data() {
    return {
      form: {
        id: null,
        businessName: '',
        businessPhone: '',
        bankBranch: '',
        bankName: '',
        bankNum: '',
        bankUserName: '',
        saleTime: '',
        amount: '',
        status: '',
        payType: '',
        picUrl: '',
      },
    }
  },
  mounted() {
    console.log(this.imageUrl)
    if (this.id) {
      this.getDetail();
    }
  },
  methods: {
    getDetail() {
      this.formLoading = true
      detail(this.id).then(res => {
        getForm(res, this.form);
      }).finally(() => {
        this.formLoading = false;
      })
    },
    close() {
      this.$emit('hideEditDialog')
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
